* {
  margin: 0;
  padding: 0;
}
body {
  //TODO 可调节页面左右空白 <-- padding
  padding-left: 200px;
  padding-right: 200px;
}
header,
footer {
  width: 100%;
  height: 200px;
  background-color: #ccc;
}
.layout {
  margin: 20px 0;
}
.layout1 {
  .left {
    float: left;
    width: 400px;
    height: 100px;
    background-color: #daf1ef;
  }
  .right {
    height: 100px;
    //TODO 双列1-可调节左间距 <-- margin
    margin-left: 400px+20px;
    background-color: #4dbcb0;
  }
}
.layout2 {
  .left {
    height: 100px;
    //TODO 双列2-可调节右间距 <-- margin
    margin-right: 400px+20px;
    background-color: #4dbcb0;
  }
  .right {
    float: right;
    width: 400px;
    height: 100px;
    background-color: #daf1ef;
  }
}
.layout3 {
  .left {
    float: left;
    width: 200px;
    height: 100px;
    background-color: #daf1ef;
  }
  .center {
    height: 100px;
    // TODO 三列3-可调节左右间距 <-- margin
    margin-left: 200px + 20px;
    margin-right: 200px + 20px;
    background-color: #4dbcb0;
  }
  .right {
    float: right;
    width: 200px;
    height: 100px;
    background-color: #daf1ef;
  }
}
.layout4 {
  .left {
    float: left;
    width: 200px;
    height: 100px;
    // TODO 三列4-左边间距 <-- margin
    margin-right: 20px;
    background-color: #daf1ef;
  }
  .center {
    float: left;
    width: 200px;
    height: 100px;
    background-color: #daf1ef;
  }
  .right {
    height: 100px;
    // TODO 三列4-右边间距 <-- margin
    margin-left: 200px + 200px + 20px + 20px;
    background-color: #4dbcb0;
  }
}
.layout5 {
  .left {
    // TODO 三列5-左边间距 <-- margin
    margin-right: 200px + 200px + 20px + 20px;
    height: 100px;
    background-color: #4dbcb0;
  }
  .center {
    float: right;
    width: 200px;
    height: 100px;
    background-color: #daf1ef;
    // TODO 三列5-右边间距 <-- margin
    margin-right: 20px;
  }
  .right {
    float: right;
    width: 200px;
    height: 100px;
    background-color: #daf1ef;
  }
}
